import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import HighPerformTable from '@/components/HighPerformTable';
import KeywordFilterSearch from '@/components/KeywordFilterSearch';
import {PlusOutlined} from '@ant-design/icons';
import {Button} from 'antd';
import APIS from '@/apis';
import FilterByCourse from "@/components/FilterByCourse";

class PaperManager extends Component<any, any> {
  actionRef: any;
  state = {
    allCourse: [],
    filter: 0
  };

  componentDidMount() {
    APIS.CourseAPI.GetCourseList({
      current: 1,
      pageSize: 99999,
      state: -1
    }).then(res => this.setState({allCourse: res.data})).catch(e => {
      console.error(e)
    })
  }

  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.ExamAPI.GetExamList({...params, sorter, filter, courseId: this.state.filter});
  }

  clomns: any = [
    {
      title: '试卷标题',
      dataIndex: 'title',
      rules: [
        {
          required: true,
          message: '试卷名称为必填项',
        },
      ],
    },
    {
      title: '试卷描述',
      dataIndex: 'description',
      valueType: 'textarea',
    },
    {
      title: '所属课程',
      dataIndex: 'courseName'
    }
  ];

  render() {
    const {allCourse} = this.state;
    return (
      <div>
        <KeywordFilterSearch
          filters={[
            {title: '角色类型', multiple: false, keywords: ['全部', '教务管理员', '教师']},
          ]}
        />
        <FilterByCourse
          course={allCourse}
          getValue={(value) => {
            this.setState({filter: value});
            this.actionRef?.reload();
          }}/>
        <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          onClickUpdate={(record) =>
            this.props.history.push({
              pathname: '/teaching/exam/editor',
              search: 'id=' + record.id,
            })
          }
          handleChangeState={(data, state) => {
            return APIS.ExamAPI.ChangeExamState({id: data.id, state: state === true ? 1 : 0});
          }}
          additionOptions={[
            {
              title: '查看',
              onClick: (record) => {
                this.props.history.push({
                  pathname: '/teaching/exam/paperDetailes',
                  state: record,
                });
              },
            },
          ]}
          handleDelete={(id) => {
            return APIS.ExamAPI.DeleteExam({id: id});
          }}
          toolBarRender={() => [
            <Button
              key="0"
              type="primary"
              onClick={() => this.props.history.push({pathname: '/teaching/exam/editor'})}
            >
              <PlusOutlined/> 新增试卷
            </Button>,
          ]}
        />
      </div>
    );
  }
}

export default connect()(PaperManager);
